<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
 <div id="myChart"  style="height:400px"></div>
   <script type="text/javascript">

   		myChart.clear();

                  require.config({
                      paths: {
                          echarts: '../resource/echart'
                      }
                  });

                  // 使用
                  require(
                      [
                          'echarts',
                          'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
                          'echarts/chart/line'
                      ],
                      function (ec) {
                       // ['2002-01-01','2003-01-01','2004-01-01','2005-01-01','2006-01-01','2007-01-01','2008-01-01','2009-01-01','2010-01-01','2011-01-01']
                          // 基于准备好的dom，初始化echarts图表
                          myChart = ec.init(document.getElementById('myChart'));
                           option  = {
                                        timeline:{
                                            data: ['1','2','3','4','5','6','7','8','9','10','11','12'],
                                            label : {
                                                formatter : function(s) {
                                                     return s;
                                                    // return s.slice(0, 4);
                                                }
                                            },
                                            autoPlay : true,
                                            playInterval : 1000
                                        },
                                        options:[
                                            {
                                                title : {
                                                    'text':'',
                                                     subtext: '单位:条'
                                                },
                                                tooltip : {'trigger':'axis'},
                                                legend : {
                                                    x:'right',
                                                    'data':['正常','非正常'],
                                                    'selected':{
                                                        '正常':true,
                                                        '非正常':true
                                                    }
                                                },
                                                toolbox : {
                                                    'show':true,
                                                    orient : 'vertical',
                                                    x: 'right',
                                                    y: 'center',
                                                    'feature':{
                                                        'mark':{'show':true},
                                                        'dataView':{'show':true,'readOnly':false},
                                                        'magicType':{'show':true,'type':['line','bar','stack','tiled']},
                                                        'restore':{'show':true},
                                                        'saveAsImage':{'show':true}
                                                    }
                                                },
                                                calculable : true,
                                                grid : {'y':80,'y2':100},
                                                xAxis : [{
                                                    'type':'category',
                                                    'axisLabel':{'interval':0},
                                                    'data':[
                                                        '1号','2号','3号','4号','5号','6号','7号','8号','9号','10号','11号','12号','13号',
                                                        '14号','15号','16号','17号','18号','19号','20号','21号','22号','23号','24号','25号','26号',
                                                        '27号','28号','29号','30号','31号'
                                                    ]
                                                }],
                                                yAxis : [
                                                    {
                                                        'type':'value',
                                                        'name':''
                                                    },
                                                    {
                                                        'type':'value',
                                                        'name':''
                                                    }
                                                ],
                                                series : [
                                                    {
                                                        'name':'正常',
                                                        'type':'bar',
                                                        'markLine':{
                                                            symbol : ['arrow','none'],
                                                            symbolSize : [4, 2],
                                                            itemStyle : {
                                                                normal: {
                                                                    lineStyle: {color:'orange'},
                                                                    barBorderColor:'orange',
                                                                    label:{
                                                                        position:'left',
                                                                        formatter:function(params){
                                                                            return params.value;
                                                                        },
                                                                        textStyle:{color:'orange'}
                                                                    }
                                                                }
                                                            },
                                                            'data':[{'type':'average','name':'平均值'}]
                                                        },
                                                        'data':[]
                                                    },
                                                    {
                                                        'name':'非正常','yAxisIndex':1,'type':'bar',
                                                        'data': []
                                                    }
                                                ]
                                            }
                                        ]
                                    };

                          myChart.showLoading({text:'正在努力加载...'});
                          // 为echarts对象加载数据
                          myChart.setOption(option);
                            // console.log(option);

                          setTimeout(function(){
                             getChartData();//ajax后台交互
                           },200);


                      }
                  );

                  function getChartData() {
                              //获得图表的options对象
                              // var options = myChart.getOption();

                              cloneOption = cloneObj(option);

                              var proInfoId = $('#proInfoId').val();
                              //通过Ajax获取数据
                              $.ajax({
                                  type : "post",
                                  async : false, //同步执行
                                  url : "ajax-pro-back!getChartData.action",
                                  data : {'proInfoId':proInfoId},
                                  dataType : "json", //返回数据形式为json
                                  success : function(result) {
                                      if (result) {
                                          var rs = result.options;
                                          cloneOption.options[0].title.text = rs[0].title;
                                          var rs_series_first = rs[0].series;
                                          for (var m=0; m<rs_series_first.length; m++){
                                                var obj = rs_series_first[m].data;

                                               cloneOption.options[0].series[m].data  = dataFormatter(rs_series_first[m].data);
                                          }
                                          for(var i=1; i<rs.length; i++){
                                              cloneOption.options.push({title : {'text':rs[i].title},series : []});
                                               var rs_series = rs[i].series;
                                               for(var j=0; j<rs_series.length;j++){

                                                   cloneOption.options[i].series.push( {'data':dataFormatter(rs_series[j].data)} );
                                                      //  var obj = rs_series[j].data;

                                                }
                                          }
                                          myChart.setOption(cloneOption);
                                        //   console.log(cloneOption);
                                      }

                                      myChart.hideLoading();
                                  },
                                  error : function(errorMsg) {
                                      alert("图表数据失败");
                                      myChart.hideLoading();
                                  }
                              });
                          }


              </script>
